<template>
    <div ref="containerRef" class="container">
        <EssayEvaluator7
            v-if="showEssay"
            :config="essayMarkConfig"
            :data="essayMarkData"
            @markClick="handleMarkClick"
        />
        <van-floating-panel
            v-model:height="panelHeight"
            :anchors="anchors"
            :content-draggable="false"
            @height-change="handleHeightChange"
        >
            <van-tabs v-model:active="viewType">
                <van-tab name="comprehensive" title="综合点评"
                    >综合点评</van-tab
                >
                <van-tab name="wordsentence" title="字词句点评"
                    >字词句点评</van-tab
                >
                <van-tab name="paragraph" title="段落点评">段落点评</van-tab>
                <van-tab name="runse" title="全文润色">全文润色</van-tab>
            </van-tabs>
        </van-floating-panel>
        <!-- <van-button @click="changeViewType('comprehensive')">综合点评</van-button>
        <van-button @click="changeViewType('wordsentence')">字词句点评</van-button>
        <van-button @click="changeViewType('paragraph')">段落点评</van-button> -->
    </div>
</template>
<script setup lang="ts">
import EssayEvaluator7 from "@/components/origin-js/index.vue";
import { onMounted, ref, watch } from "vue";
import cuiguanglin from "@assets/paper-trace/cuiguanglin.png";
import img1 from "@assets/paper-trace/1.png";

const { windowWidth, windowHeight } = uni.getSystemInfoSync();

const showEssay = ref(false);
const containerRef = ref();
const essayMarkData = ref([]);
const essayMarkConfig = ref<EssayEvaluatorConfig>();
const viewType = ref("comprehensive");

const anchors = [
    windowHeight * 0.2,
    Math.round(0.4 * windowHeight),
    Math.round(0.7 * windowHeight),
];
const panelHeight = ref(anchors[0]);
const flag = ref(false);
const wordFlag = ref(false);

const handleMarkClick = (type: string, markInfo: BaseMarkInfo) => {
    // console.log("点击", type, markInfo);
    if (viewType.value === "comprehensive" || viewType.value === "runse") {
        if (type === "word" || type === "sentence") {
            viewType.value = "wordsentence";
        } else if (type === "paragraph") {
            viewType.value = "paragraph";
        }
    }
};

watch(
    () => viewType.value,
    (type) => {
        essayMarkConfig.value.viewType =
            type === "runse" ? "comprehensive" : type;
        if (type === "paragraph" && !flag.value) {
            flag.value = true;
            setTimeout(() => {
                essayMarkData.value[0].selections.paragraphs = [
                    {
                        text: "",
                        cooridates: [
                            { x1: 70, y1: 315, x2: 345, y2: 335 },
                            { x1: 26, y1: 336, x2: 345, y2: 363 },
                            { x1: 26, y1: 360, x2: 345, y2: 388 },
                        ],
                    },
                ];
                essayMarkData.value[1].selections.paragraphs = [
                    {
                        text: "",
                        cooridates: [
                            { x1: 70, y1: 315, x2: 345, y2: 335 },
                            { x1: 26, y1: 336, x2: 345, y2: 363 },
                            { x1: 26, y1: 360, x2: 345, y2: 388 },
                        ],
                    },
                ];
                essayMarkData.value[0].selections.corrections = [
                    {
                        text: "当你凝视深渊的时候，深渊也在凝视你",
                        cooridates: [
                            { x1: 280, y1: 180, x2: 350, y2: 202 },
                            { x1: 25, y1: 204, x2: 325, y2: 230 },
                        ],
                    },
                    {
                        text: "不以身世之苦，不念生活之卑",
                        cooridates: [
                            { x1: 320, y1: 450, x2: 350, y2: 472 },
                            { x1: 25, y1: 477, x2: 285, y2: 500 },
                        ],
                    },
                ];
            }, 300);
        }
        if (type === "wordsentence" && !wordFlag.value) {
            wordFlag.value = true;
            essayMarkData.value[0].selections.words = [
                {
                    text: "飞悬瀑布",
                    cooridates: [{ x1: 65, y1: 44, x2: 355, y2: 60 }],
                },
                {
                    text: "艰辛无比",
                    cooridates: [{ x1: 132, y1: 395, x2: 220, y2: 420 }],
                },
                {
                    text: "连绵之网",
                    cooridates: [
                        { x1: 300, y1: 100, x2: 345, y2: 120 },
                        { x1: 25, y1: 125, x2: 70, y2: 148 },
                    ],
                },
            ];
            essayMarkData.value[0].selections.sentences = [
                {
                    text: "当你凝视深渊的时候，深渊也在凝视你",
                    cooridates: [
                        { x1: 280, y1: 180, x2: 350, y2: 202 },
                        { x1: 25, y1: 204, x2: 325, y2: 230 },
                    ],
                },
                {
                    text: "不以身世之苦，不念生活之卑",
                    cooridates: [
                        { x1: 320, y1: 450, x2: 350, y2: 472 },
                        { x1: 25, y1: 477, x2: 285, y2: 500 },
                    ],
                },
            ];
            essayMarkData.value[1].selections.words = [
                {
                    text: "那就是钱",
                    cooridates: [{ x1: 170, y1: 48, x2: 255, y2: 70 }],
                },
                {
                    text: "艰辛无比",
                    cooridates: [{ x1: 135, y1: 406, x2: 220, y2: 428 }],
                },
            ];
            essayMarkData.value[1].selections.sentences = [
                {
                    text: "当你凝视深渊的时候，深渊也在凝视你",
                    cooridates: [
                        { x1: 288, y1: 185, x2: 358, y2: 207 },
                        { x1: 30, y1: 214, x2: 330, y2: 236 },
                    ],
                },
            ];
        }
    }
);

const handleHeightChange = ({ height }: { height: number }) => {
    const restHeight = windowHeight - height - 44;
    essayMarkConfig.value.stageHeight = restHeight;
};

const createMarkData = () => {
    return [
        {
            url: cuiguanglin,
            id: "111",

            selections: {
                // words: [
                //     {
                //         text: "飞悬瀑布",
                //         cooridates: [{ x1: 65, y1: 44, x2: 155, y2: 70 }],
                //     },
                //     {
                //         text: "艰辛无比",
                //         cooridates: [{ x1: 132, y1: 395, x2: 220, y2: 420 }],
                //     },
                //     {
                //         text: "连绵之网",
                //         cooridates: [
                //             { x1: 300, y1: 100, x2: 345, y2: 120 },
                //             { x1: 25, y1: 125, x2: 70, y2: 148 },
                //         ],
                //     },
                // ],
                // sentences: [
                //     {
                //         text: "当你凝视深渊的时候，深渊也在凝视你",
                //         cooridates: [
                //             { x1: 280, y1: 180, x2: 350, y2: 202 },
                //             { x1: 25, y1: 204, x2: 325, y2: 230 },
                //         ],
                //     },
                //     {
                //         text: "不以身世之苦，不念生活之卑",
                //         cooridates: [
                //             { x1: 320, y1: 450, x2: 350, y2: 472 },
                //             { x1: 25, y1: 477, x2: 285, y2: 500 },
                //         ],
                //     },
                // ],
                // paragraphs: [
                //     {
                //         text: "",
                //         cooridates: [
                //             { x1: 70, y1: 315, x2: 345, y2: 335 },
                //             { x1: 26, y1: 336, x2: 345, y2: 363 },
                //             { x1: 26, y1: 360, x2: 345, y2: 388 },
                //         ],
                //     },
                // ],
            },
        },
        {
            url: img1,
            id: "222",
            selections: {
                // words: [
                //     {
                //         text: "那就是钱",
                //         cooridates: [{ x1: 170, y1: 48, x2: 255, y2: 70 }],
                //     },
                //     {
                //         text: "艰辛无比",
                //         cooridates: [{ x1: 135, y1: 406, x2: 220, y2: 428 }],
                //     },
                // ],
                // sentences: [
                //     {
                //         text: "当你凝视深渊的时候，深渊也在凝视你",
                //         cooridates: [
                //             { x1: 288, y1: 185, x2: 358, y2: 207 },
                //             { x1: 30, y1: 214, x2: 330, y2: 236 },
                //         ],
                //     },
                // ],
                // paragraphs: [
                //     {
                //         text: "",
                //         cooridates: [
                //             { x1: 70, y1: 324, x2: 352, y2: 346 },
                //             { x1: 26, y1: 346, x2: 352, y2: 370 },
                //             { x1: 26, y1: 370, x2: 352, y2: 400 },
                //         ],
                //     },
                // ],
            },
        },
    ];
};

onMounted(async () => {
    essayMarkConfig.value = {
        stageWidth: windowWidth,
        stageHeight: windowHeight - panelHeight.value - 44,
        // dir: "horizontal",
        dir: "vertical",
        score: 90,
        flunked: false,
        viewType: viewType.value,
    };
    essayMarkData.value = createMarkData();
    showEssay.value = true;
});
</script>
<style lang="scss" scoped></style>
